<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="/WEB-INF/tlds/spring.tld"%>
<%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld"%>
<c:set var="BasePath" value="${pageContext.request.contextPath}"></c:set>
<c:set var="Plugins" value="${pageContext.request.contextPath}/res/plugins"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>海航通信ERP系统登录界面</title>
<link href="${BasePath}/res/css/common/login.css" type="text/css"  rel="stylesheet" />
<link rel="shortcut icon" href="${BasePath}/res/images/logo.jpg" type="image/x-icon" />
<script src="${Plugins}/jquery/jquery-1.3.2.min.js"	type="text/javascript"></script>
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script type="text/javascript" src="${BasePath}/res/js/common/md5.js"></script>
<script type="text/javascript">
var captcha;
$(document).keyup(function(event) {
	if (event.keyCode == 13) {
		submitLoginForm();
		return false;
	}
});
$(document).ready(function(){
  $("#loginName").focus(function(){
	  if ($("#loginName").val() == '用户名') {
	  	$("#loginName").val('');
    	$("#loginName").css("color","#000000");
	  }
  });
  $("#loginName").blur(function(){
	  if ($("#loginName").val() == '') {
		  $("#loginName").val('用户名');
      	  $("#loginName").css("color","#CFCFCF");
	  }
  });
  if ($("#loginPassword").val() != '') {
	  $('#pwdPlaceHolder').html('');
  }
  $("#loginPassword").focus(function(){
	  if ($('#pwdPlaceHolder').html() == '密码') {
		  $('#pwdPlaceHolder').html('');
		  $("#loginPassword").css("color","#000000");
	  }
  });
  $("#loginPassword").blur(function(){
	  if ($('#loginPassword').val() == '') {
		  $('#pwdPlaceHolder').html('密码');
		  $("#loginPassword").css("color","#CFCFCF");
	  }
  });
  $("#code").focus(function(){
    $("#code").css("color","#000000");
  });
  
  var handlerEmbed = function (captchaObj) {
	  captcha=captchaObj;
      // 将验证码加到id为captcha的元素里
      captchaObj.appendTo("#embed-captcha");
  };
  $.ajax({
      // 获取id，challenge，success（是否启用failback）
      url: "${BasePath}/StartCaptchaServlet?sessionId="+new Date().getTime(),
      type: "get",
      dataType: "json",
      success: function (data) {
          // 使用initGeetest接口
          // 参数1：配置参数
          // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
          initGeetest({
              gt: data.gt,
              challenge: data.challenge,
              product: "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
              https: true,
              offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
          }, handlerEmbed);
      }
  });
  
});
//更换验证码1
function changeValidateImage(time){
	var time = new Date().getTime();
	$('#code').val('');
	$('#imageValidateHref').html('');
	$('#imageValidateHref').html('<img src="${BasePath}/servlet/imageValidate?sessionId=' + time + '" id="imageValidate" alt="验证码图片" title="验证码图片" />');
}
function submitLoginForm() {
	if ($("#loginName").val() == '用户名' || $("#loginName").val() == '') {
		$("#warnMessagekey").html("请输入用户名");
		return;
	}
	if ($('#loginPassword').val() == '') {
		$("#warnMessagekey").html("请输入密码");
		return;
	}
	if ($('#code').val() == '') {
		$("#warnMessagekey").html("请输入图形验证码");
		return;
	}
	/* 图片验证码	(目前采用滑动图片解锁，图片验证码屏蔽)
	if (!validateCode()) {
		$("#warnMessagekey").html("请输入正确的图形验证码");
		return;
	} 
	*/
	if (!validateCaptcha()) {
		$("#warnMessagekey").html("请先拖动验证码到相应位置");
		return;
	}
	var hexPwd=hex_md5($("#loginPassword").val());
	$("#loginPassword").val(hexPwd);
	$("#loginForm").submit();
	/*form.ajaxSubmit({
			url : "login.do",
			type : "post",
			dataType:"json",    	
			async:false,    			
			success : function(result) {
				var msg = result.msg;
				var code = result.code;
				var data = result.data;
				if (code == "1") {
					window.location.href=data;
				}else{
					//bootbox.alert(msg);	
					$('#errorInfo').html(msg);    						
				} 						
			}
		}); */
}
function validateCode() {
	var result=true;
	var inputCode=$("#code").val();
	$.ajax({
		type:"POST",
		url:"validateCode.do",
		data:{"code":inputCode},
		async : false,
		success:function(data){
			if(data=="fail"){
				result=false;
			}
		}
	  });
	return result;
}

function validateCaptcha(){
	var result=false;
	if(captcha){
		var validate = captcha.getValidate();
	    if (validate) {
	    	result=true;
	    }
	}
	return result;
}
</script>
<style>
        .inp {
            border: 1px solid gray;
            padding: 0 10px;
            width: 200px;
            height: 30px;
            font-size: 18px;
        }

        .btn {
            border: 1px solid gray;
            width: 100px;
            height: 30px;
            font-size: 18px;
            cursor: pointer;
        }

        #embed-captcha {
            width: 300px;
            margin: 0 auto;
        }

        .show {
            display: block;
        }
        .hide {
            display: none;
        }
        #notice {
            color: red;
        }
    </style>
</head>
<body>
<form method="post" id="loginForm" name="loginForm" action="login.do">
<input type="hidden" id="ssid" name="ssid" value="<%=request.getSession().getId()%>" />
<div class="loginBody">
<div class="loginLogo"><img src="${BasePath}/res/css/images/logo.jpg" /></div>
<div class="loginRight">
<div class="loginTitle"><img src="${BasePath}/res/css/images/loginTitle.jpg" />(测试版)</div>
<div class="loginText">
<li>
	<input type="text" name="loginName" id="loginName" class="loginText1" value="" maxlength="20"/>
</li>
<li style="position:relative">
	<input type="password" name="loginPassword" id="loginPassword" class="loginText2" value="" maxlength="18" />
	<label for="pwdInput" class="placeHolder" id="pwdPlaceHolder">密码</label>
</li>
</div>

<div class="loginYzm" style="position: relative; top: 25px; ">
<%-- 图片验证码	(目前采用滑动图片解锁，图片验证码屏蔽)
<li><input type="text" id="code" name="code" class="loginText3" maxlength="4"/></li>
<li class="loginYzm2"><a href="#" id="imageValidateHref"><img src="${BasePath}/servlet/imageValidate?sessionId=${pageContext.session.id}" id="imageValidate" alt="验证码图片" title="验证码图片" /></a></li>
<li class="loginYzm3"><a href="javascript:void(0);" onclick="changeValidateImage();return false;" >换一张</a></li> 
--%>
<li class="loginYzm4"><div id="embed-captcha"></div></li>
</div>
<div class="loginBtn" style="margin-top: -59px; margin-left: 15px;"><a href="#" onclick="javascript:submitLoginForm();"></a></div>
<div id="loginTipDiv" style="position: relative; left: -355px; top: 200px; width: 600px;" >
<c:choose>
	<c:when test="${warnMessagekey != null }"><div id="warnMessagekey" class="loginTip"><font color="red">${warnMessagekey }</font></div></c:when>
	<c:otherwise><div  id="warnMessagekey"  style="color: red;" class="loginTip"></div></c:otherwise>
</c:choose>
</div>
</div>

</div>
</form>
</body>
</html>
